<template>
  <div>
    <div id="main" ref="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Charts",
  props: {
    alltabdata: {
      type: Object,
      default: function () {
        return {
          'xAxisdata': [1],
          'yinputdata': [2],
          'yincomedata': [3]
        }
      }
    },
    tabtype: {
      type: String,
      default: function () {
        return "line"
      }
    }
  },
  data() {
    return {
      echartsdata: {
        // title: {
        //   text: "月收入支出对比",
        //   textStyle: {
        //     color: "#fff"
        //   }
        // },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "收入",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
            itemStyle: {
              color: "#4797e2"
            }
          },
          {
            name: "支出",
            type: "bar",
            data: [50, 60, 46, 20, 30, 50],
            itemStyle: {
              color: "#11c96d"
            }
          }
        ]
      }
    }
  },
  watch: {
    yinputdata() {
      this.setechart()
    }
  },
  mounted() {
    this.setechart()
  },
  methods: {
    // 实例化表
    setechart() {
      let rt = this.alltabdata
      this.echartsdata.xAxis.data = rt.xAxisdata
      this.echartsdata.series[0].data = rt.yincomedata
      this.echartsdata.series[1].data = rt.yinputdata
      // console.log(rt)
      // this.echartsdata.series[0].type = this.tabtype
      // this.echartsdata.series[1].type = this.tabtype
      let ln = this.echartsdata.series.length
      for (let i = 0; i < ln; i++) {
        this.echartsdata.series[i].type = this.tabtype
      }
      echarts.init(this.$refs.chart).setOption(this.echartsdata);
    }
  }
};
</script>
<style scoped>
   #main {
       width: 700px;
       height: 350px;
       background-color:transparent;
      }
</style>

